<template>
  <div class="index drillGuide">
    <Header></Header>
    <div class="main">
      <p class="current-nav">
        当前位置 :
        <router-link to="index">首页</router-link>
        <i>></i>
        <a>应急演练</a>
        <i>></i>
        应急演练管理
      </p>
      <div class="mianOut">
        <div class="mianInner1">
          <div class="infor record" style="margin-top:0;">
            <ul class="clearfix steps" style=" padding-top:30px;">
              <li class="steps-active" @click="goToPage(0)">
                <span style="margin-left: 20px;">1</span>
                <p>应急演练指导</p>
              </li>
              <li class="steps-active" @click="goToPage(1)">
                <span style="margin-left: 20px;">2</span>
                <p>应急演练管理</p>
              </li>
            </ul>
          </div>
          <div>
            <div
              class="downBox clearfix"
              style="margin-top:0;padding-top:40px;"
            >
              <h4 class="table_tit">应急演练计划</h4>
              <a class="download" @click="deletedirll"
              ><i class="el-icon-delete"></i> 删除</a
              >
              <a class="download" style="margin-right: 10px" @click="add"
              ><i class="el-icon-plus"></i> 新增</a
              >
            </div>
            <el-table
              ref="multipleTable1"
              :data="drillDate"
              @selection-change="handleSelectionChange"
              row-key="getRowKey"
            >
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="100"
              >
              </el-table-column>
              <el-table-column
                label=""
                :reserve-selection="true"
                type="selection"
                align="center"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="drillContent"
                label="预案名称"
                align="center"
                width="210"
              >
                <template slot-scope="scope">
                  <el-select v-model="scope.row.planName" @change="onChangeStripe($event,scope)" :disabled="scope.row.id?true:false" >
                    <el-option
                      v-for="(item,index) in names"
                      :key="index"
                      :label="item.planName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="预案类型"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.planCategory=='1'">
                        综合预案
                  </span>
                  <span v-if="scope.row.planCategory=='2'">
                        专项预案
                  </span>
                  <span v-if="scope.row.planCategory=='3'">
                        现场处置方案
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="drillContent"
                label="演练周期"
                align="center"
              >
                <template slot-scope="scope">
                  <el-select v-model="scope.row.drillPeriod" @change="onChangeTime($event,scope)">
                    <el-option
                      v-for="(item,index) in times"
                      :key="index"
                      :label="item.label"
                      :value="item.val">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="drillStatus"
                label="演练状态"
                align="center"
              >
                >
                <template slot-scope="scope">
                 {{scope.row.drillStatus=='1'?'未演练':scope.row.drillStatus=='2'?'已演练':''}}
                </template>
              </el-table-column>
              <el-table-column
                label="演练时间"
                align="center"
              >
                <template slot-scope="scope">
                  {{scope.row.drillTime|timeBy}}
                </template>
              </el-table-column>
              <el-table-column
                label="演练对象"
                align="center"
              >
                <template slot-scope="scope">
                  {{scope.row.drillTarget=='1'?'全员':scope.row.drillTarget=='2'?'部分人员':''}}
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="145"
              >
                <template slot-scope="scope">
                  <el-button
                    class="detail-btn"
                    size="small"
                    @click="upload(scope.row)"
                  ><i class="el-icon-upload2">生成演练记录</i></el-button
                  >
                </template>
              </el-table-column>
            </el-table>


            <div class="downBox clearfix">
              <h4 class="table_tit">应急演练档案</h4>
             <!-- <a class="download"
              ><i class="el-icon-download"></i>下载</a
              >-->
            </div>
            <el-table
              ref="multipleTable"
              v-loading="loadingFlag"
              :span-method="objectSpanMethod"
              :data="data"
              row-key="getRowKey"
            >
              <el-table-column
                align="center"
                label="序号"
                width="100"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index==0?1 : (scope.$index/3)+1}}</span>
                </template>
              </el-table-column>
        <!--      <el-table-column
                label=""
                :reserve-selection="true"
                type="selection"
                align="center"
                width="100"
              >
              </el-table-column>-->
              <el-table-column
                label="档案类别"
                align="center"
                prop="dossierType"
                width="400"
              >
              </el-table-column>
              <el-table-column
                label="文件名称"
                align="center"
                prop="templateName"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="240"
              >
                <template slot-scope="scope">
                  <div style="display: flex;justify-content: center">
                  <el-button
                    class="detail-btn"
                    @click="getDetail(scope.row)"
                  ><i class="el-icon-search"></i> 查看
                  </el-button
                  >
                  <el-button
                    class="detail-btn"
                    @click="downData(scope.row.id)"
                  ><i class="el-icon-download"></i> 下载
                  </el-button
                  ></div>
                </template>
              </el-table-column>
            </el-table>
            <div class="page-container">
              <el-pagination
                @current-change="getList1"
                :current-page.sync="pageIndex"
                @size-change="handleSizeChange"
                :page-size=" Math.floor(pageSize/3)"
                layout="total, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="生成演练记录"
        :visible.sync="flag"
        width="50%"
        :append-to-body="true"
        @close="resetForm('ruleForm')"
      >
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            enctype="multipart/form-data"
            label-width="125px"
            class="demo-ruleForm uploadForm"
          >
            <el-form-item
              label="演练方式:"
              prop="drillWay"
            >
              <el-select v-model="ruleForm.drillWay" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="(item,index) in drillMode"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="演练时间:"
              prop="drillTime"
            >
              <el-date-picker
                v-model="ruleForm.drillTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="date"
                format="yyyy-MM-dd hh:mm:ss"
                style="width: 100%"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="总指挥:"
              prop="director"
            >
              <el-input
                class="firstValue"
                v-model="ruleForm.director"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="副总指挥:"
              prop="deputyDirector"
            >
              <el-input
                class="firstValue"
                v-model="ruleForm.deputyDirector"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="组织部门:"
              prop="organizationDept"
            >
              <el-input
                class="firstValue"
                v-model="ruleForm.organizationDept"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="演练地点:"
              prop="drillPlace"
            >
              <el-input
                class="firstValue"
                v-model="ruleForm.drillPlace"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="参演人员:"
              prop="drillPeople"
            >
              <el-input
                class="firstValue"
                v-model="ruleForm.drillPeople"
              ></el-input>
            </el-form-item>
            <el-form-item
            label="演练过程描述:"
            prop="drillDescription"
          >
            <el-input
              class="firstValue"
              v-model="ruleForm.drillDescription"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-form-item>
            <el-form-item
              label="演练取得的成绩:"
              prop="drillResult"
            >
              <el-input
                class="firstValue"
                v-model="ruleForm.drillResult"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="演练不足之处:"
              prop="drillDefects"
            >
              <el-input
                class="firstValue"
                v-model="ruleForm.drillDefects"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="应急演练评估:"
            >
              <table class="ideaTable ideaTable1">
                <thead>
                <tr style="width: 50px">
                  <td colspan="2">预案适宜性充分性评审</td>
                  <td class="td">
                    <p>适宜性：
                      <el-radio-group style="display: inline;"
                        v-model="ruleForm.suitability">
                        <el-radio v-for="(city,index) in dataList1" :label="city.val" :key="index">{{city.label}}</el-radio>
                      </el-radio-group>
                    </p>
                    <p>充分性：
                      <el-radio-group style="display: inline"
                                         v-model="ruleForm.adequacy">
                        <el-radio v-for="(city,index) in dataList2" :label="city.val" :key="index">{{city.label}}</el-radio>
                      </el-radio-group>
                    </p>
                  </td>
                </tr>
                <tr>
                  <td rowspan="4">演练效果评估</td>
                  <td style="font-weight: bold">人员到位情况</td>
                  <td class="td">
                    <p>人员到位：
                      <el-radio-group style="display: inline"
                                         v-model="ruleForm.personnelAvailability">
                        <el-radio v-for="(city,index) in dataList4" :label="city.val" :key="index">{{city.label}}</el-radio>
                      </el-radio-group>
                    </p>
                    <p>熟练程度：
                      <el-radio-group style="display: inline"
                                         v-model="ruleForm.skilledSituation">
                        <el-radio v-for="(city,index) in dataList8" :label="city.val" :key="index">{{city.label}}</el-radio>
                      </el-radio-group>
                    </p>
                  </td>
                </tr>
                <tr>
                  <td class="td">物资到位情况</td>
                  <td ><p>现场物资：
                    <el-radio-group style="display: inline"
                                       v-model="ruleForm.sceneMaterials">
                      <el-radio v-for="(city,index) in dataList4" :label="city.val" :key="index">{{city.label}}</el-radio>
                    </el-radio-group>
                  </p>
                    <p>个人防护：
                      <el-radio-group style="display: inline"
                                         v-model="ruleForm.personalProtection">
                        <el-radio v-for="(city,index) in dataList5" :label="city.val" :key="index">{{city.label}}</el-radio>
                      </el-radio-group>
                    </p>
                  </td>
                </tr>
                <tr>
                  <td>协调组织情况</td>
                  <td class="td">
                    <p>整体组织：
                      <el-radio-group style="display: inline"
                                         v-model="ruleForm.overallOrganization">
                        <el-radio v-for="(city,index) in dataList6" :label="city.val" :key="index">{{city.label}}</el-radio>
                      </el-radio-group>
                    </p>
                    <p>抢险组分工：
                      <el-radio-group style="display: inline"
                                         v-model="ruleForm.rescueTeamWork">
                        <el-radio v-for="(city,index) in dataList7" :label="city.val" :key="index">{{city.label}}</el-radio>
                      </el-radio-group>
                    </p>
                  </td>
                </tr>
                <tr>
                  <td>实战效果评价</td>
                  <td class="td">
                    <el-radio-group style="display: inline"
                                       v-model="ruleForm.actualEffect">
                      <el-radio v-for="(city,index) in dataList8" :label="city.val" :key="index">{{city.label}}</el-radio>

                    </el-radio-group>
                  </td>
                </tr>
                </thead>
              </table>
            </el-form-item>
            <el-form-item
              label="演练图片上传:"
            >
              <div style="width: 77%;float: left">
              <el-input
                type="text"
                v-model="ruleForm.positionName"

                disabled
              ></el-input>
              <p>· 文件格式可为.jpeg、jpg、png等格式</p>
              </div>
              <div class="select_btn" style="width:100px;float: right">
                <el-upload
                  action=""
                  ref="reportUpload"
                  :on-change="changeimg1"
                  :http-request="newload"
                  accept=".jpg, .png, .jpeg, .gif"
                  :before-upload="beforeAvatarUpload"
                >
                  <el-button  v-loading="loading"
                  ><i class="el-icon-upload2"> 上传</i></el-button
                  >
                </el-upload>
              </div>
            </el-form-item>
          <!--<div class="timeSelect">
           <div class="select_btn" style="width: 80%;display: inline-block">
             <span style="width: 120px;display: inline-block">演练图片上传:</span>
             <el-input
               type="text"
               v-model="positionName"
               style="width: 77%;"
               disabled
             ></el-input>
             <p>· 文件格式可为.jpeg、jpg、png等格式</p>
             <input
               type="text"
               v-show="false"
             />
           </div>
            <div class="select_btn" style="width:100px;float: right">
              <el-upload
                action="api/userCenter/uploadFile/doUploadFast"
                ref="reportUpload"
                :on-change="changeimg1"
                :http-request="newload"
                accept=".jpg, .png, .jpeg, .gif"
                :before-upload="beforeAvatarUpload"
              >
                <el-button
                ><i class="el-icon-upload2"> 上传</i></el-button
                >
              </el-upload>
            </div>
          </div>-->
          </el-form>
          <div style="overflow:hidden;margin-top:80px;">
            <a
              class="send"
              @click="flag = false"
              style="margin:0;border: 1px solid #5ea0ff;color: #4080ff;width:80px;"
            >取 消</a
            >
            <a class="save"  @click="submitForm('ruleForm')">保存</a>
          </div>
        </div>
      </el-dialog>

    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from '../common/header'
  import Footer from '../common/footer'
  import config from "../../config.js"

  export default {
    name:"drillManagement",
    components: {
      Header,
      Footer
    },
    data() {
      return {
        loadingFlag: false,
        downIds: [],
        data: [],
        currentPage: 1,
        pageIndex: 1,
        pageSize: 12,
        total: 0,
        drillContent: '',
        drillDate: [],
        navChildren: [],
        flag: false,
        ruleForm: {
    },
        rules: {
          drillWay: [
            {
              required: true,
              message: "请选择演练方式",
              trigger: "blur"
            }
          ],
          drillTime: [
            {
              required: true,
              message: "请输入演练时间",
              trigger: "blur"
            }
          ],
          director: [
            {
              required: true,
              message: "请输入总指挥",
              trigger: "blur"
            }
          ],
          organizationDept: [
            {
              required: true,
              message: "请输入组织部门",
              trigger: "blur"
            }
          ],
          drillPlace: [
            {
              required: true,
              message: "请输入演练地点",
              trigger: "blur"
            }
          ],
          drillPeople: [
            {
              required: true,
              message: "请输入参演人员,如:全体员工、安全部全体人员",
              trigger: "blur"
            }
          ],
          drillDescription: [
            {
              required: true,
              message: "请输入演练过程描述",
              trigger: "blur"
            }
          ],
          drillResult: [
            {
              required: true,
              message: "“请输入演练取得的成绩",
              trigger: "blur"
            }
          ],
          drillDefects: [
            {
              required: true,
              message: "请填写演练不足之处",
              trigger: "blur"
            }
          ],
          suitability: [
            {
              required: true,
              message: "请选择预案适宜性",
              trigger: "blur"
            }
          ],
          adequacy: [
            {
              required: true,
              message: "请选择预案充分性",
              trigger: "blur"
            }
          ],
          personnelAvailability: [
            {
              required: true,
              message: "请选择人员到位情况",
              trigger: "blur"
            }
          ],
          sceneMaterials: [
            {
              required: true,
              message: "请选择现场物资情况",
              trigger: "blur"
            }
          ],
          personalProtection: [
            {
              required: true,
              message: "请选择个人防护情况",
              trigger: "blur"
            }
          ],
          overallOrganization: [
            {
              required: true,
              message: "请选择整体组织情况",
              trigger: "blur"
            }
          ],
          rescueTeamWork: [
            {
              required: true,
              message: "请选择抢险组分情况",
              trigger: "blur"
            }
          ],
          actualEffect: [
            {
              required: true,
              message: "实战效果评价",
              trigger: "blur"
            }
          ]
        },
        dataList1:[{"val":"1A","label":'全部能够执行'}, {"val":"1B","label":'执行过程不够顺利'}, {"val":"1C","label":'明显不适宜'}],
        dataList2:[{"val":"2A","label":'完全满足应急要求'}, {"val":"2B","label":'基本满足需要完善'}, {"val":"2C","label":'不充分，必须修改'}],
        dataList3:[{"val":"3A","label":'迅速准确'}, {"val":"3B","label":'基本按时到位'}, {"val":"3C","label":'个别人员不到位'},
            {"val":"3D","label":'重点部位人员不到位'}],
          dataList5:[{"val":"5A","label":'现场物资充分，全部有效'}, {"val":"5B","label":'现场准备不充分'}, {"val":"5C","label":'现场物资严重缺乏'}],
          dataList6:[{"val":"6A","label":'全部人员防护到位'}, {"val":"6B","label":'个别人员防护不到位'}, {"val":"6C","label":'大部分人员防护不到位'}],
          dataList7:[{"val":"7A","label":'准确、高效'}, {"val":"7B","label":'协调基本顺利，能满足要求'}, {"val":"7C","label":'效率低，有待改进'}],
          dataList8:[{"val":"8A","label":'合理、高效'}, {"val":"8B","label":'协调合理，能完成任务'}, {"val":"8C","label":'效率低，没有完成任务'}],
          dataList9:[{"val":"9A","label":'达到预期目标'}, {"val":"9B","label":'基本达到目标，部分环节有待改进'}, {"val":"9C","label":'没有达到目标，须重新演练'}],
        dataList4:[{"val":"4A","label":'职责明确，操作熟练'},{"val":"4B","label":'职责明，操作不够熟练'}, {"val":"4C","label":'职责不明，操作不熟练'}],
        checkedCities:[],
        names:[],
        drillMode:[{"label":"桌面演练","value":"1"},{"label":"实战演练","value":"2"},{"label":"模拟演练","value":"3"}],
        times:[{"val":"1","label":"两年一次"},{"val":"2","label":"每年一次"},{"val":"3","label":"半年一次"},{"val":"4","label":"每季度一次"},{"val":"5","label":"每月一次"}],
        loading:false,
        safetyDept: "",
        legalPerson:"",
      };
    },
    created() {
      this.navChildren = JSON.parse(this.$route.query.navChildren)
      this.getName()
      this.getList1()
      this.getList2()
      this.getInfo()
    },
    methods: {
      getInfo(){//获取总指挥跟组织部门信息
        this.$axios({
          method: "post",
          url: config.baseUrl + "/emergency/v1.0/drill/records/info",
          data: {"companyId":JSON.parse(localStorage.getItem("user")).companyId}
        }).then(res => {
          if (res.data.meta.success) {
            this.safetyDept=res.data.data.safetyDept;
            this.legalPerson=res.data.data.legalPerson
            this.data= res.data.data.records
          }
        })
      },
      upload(row) {
         if(row.planName){
           this.flag=true
           let rowInfo=JSON.parse(JSON.stringify(row))
           this.ruleForm=rowInfo
           if(!this.ruleForm.id){
             this.$set(this.ruleForm,"director",this.legalPerson)
             this.$set(this.ruleForm,"organizationDept",this.safetyDept)
           }
           this.ruleForm.positionName=this.ruleForm.drillImg?JSON.parse(this.ruleForm.drillImg).fileName:null

         }else{
           this.$message({
             message: "请选择预案名称",
             type: 'error'
           });
         }

      },
      download(blobUrl, name) {
        const a = document.createElement('a');
        a.style.display = 'none';
        a.download = name;
        a.href = blobUrl;
        a.click();
      },
      getDetail(row) {
        this.$axios
          .get(config.baseUrl + '/emergency/v1.0/drill/dossier/info/' + row.id)
          .then(res => {
            if (res.data.meta.success) {
              window.open(res.data.data)
            } else {
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      downData(id){
        this.$axios
        ({
          method: 'get',
          url: config.baseUrl+"emergency/v1.0/drill/dossier/download/"+id,
        }).then(
          (res)=>{
            if(res.data.meta.success){
              if(res.data.meta.message){
                window.location.href=res.data.data
              }else{
                this.$message.warning('下载文件为空')
              }
            }else{

              this.$message.warning(res.data.meta.message)
            }
          }
        )
      },
      getList1() {   //常用事故应急演练模板列表查询
        let params = {
          companyId: JSON.parse(localStorage.getItem("user")).companyId,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
        this.$axios({
          method: "post",
          url: config.baseUrl + "emergency/v1.0/drill/dossier/list",
          data: params
        }).then(res => {
          if (res.data.meta.success) {
            this.data= res.data.data.records
            this.total = Math.floor(res.data.data.total/3)
          } else {
            this.data = []
           this.$message.warning(res.data.meta.message)
          }
        })
          .catch(response => {
            console.log(response);
          });
      },
      getList2() {   //应急演练通用模板列表查询
        this.$axios
          .get(config.baseUrl + 'emergency/v1.0/drill/records/'+JSON.parse(localStorage.getItem("user")).companyId)
          .then(res => {
            if (res.data.meta.success) {
              this.drillDate = res.data.data
            } else {
              this.drillDate = []
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      downFile(id) {
        this.$axios
          .post(config.baseUrl + 'filetemplate/v1.0/downloadfile/querybyid?id=' + id)
          .then(res => {
            if (res.data.meta.success) {
              const iframe = document.createElement("iframe");
              iframe.style.display = "none"; // 防止影响页面
              iframe.style.height = 0; // 防止影响页面
              iframe.src = res.data.data;
              document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
              // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
              setTimeout(() => {
                iframe.remove();
              }, 5 * 60 * 1000);
              this.toggleSelection()

            } else {
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      handleSelectionChange(data) {
        this.downIds = data
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      goToPage(index) {
        this.$router.push({
          path: this.navChildren[index].menuUrl,
          query: {
            navIndex: this.$route.query.navIndex,
            navChildren: this.$route.query.navChildren
          }
        })
      },
      add() {
        this.drillDate.push({"drillResult":"通过本次应急演练，增强了员工的安全意识，促进了对应急预案的理解，锻炼了员工自救互救和应急逃生技能，提高了突发事件下的应急反应速度和处置效率，验证了应急预案的有效性、科学性、实用性、针对性，提升了公司整体应急管理水平。",
        "drillDefects":"部分员工思想上不够重视，演练时态度不够严肃，行动不够积极，未能体现事故发生时的紧张气氛；应急救援人员之间的协调配合不够熟练，应急处置效率还需进一步提升。"})
      },
      deletedirll() {
        if (this.downIds.length == 0) {
          this.$message({
            message: "请选择删除行",
            type: 'success'
          });
          return
        } else if(this.downIds.length >1){
          this.$message({
            message: "只能删除一行",
            type: 'success'
          });
          return
        }else {
          if(this.downIds[0].id){
            this.$axios
              .get(config.baseUrl + 'emergency/v1.0/drill/record/del/'+JSON.parse(localStorage.getItem("user")).companyId+"/"+this.downIds[0].id)
              .then(res => {
                if (res.data.meta.success) {
                  this.$message({
                    message: "删除成功",
                    type: 'success'
                  });
       /*           debugger
                  for (let i = 0;i<this.drillDate.length;i++){
                    let obj = this.drillDate[i];
                    if (obj.id==this.downIds[0].id){
                      this.drillDate.splice(i,1);
                      var index=this.downIds.indexOf(this.downIds[0].id);
                      this.downIds.splice(index,1)
                    }
                  }*/
                  this.getList1();
                  this.getList2();
                } else {
                  this.$message({
                    message: "删除失败",
                    type: 'error'
                  });
                }
              })
              .catch(response => {
                console.log(response);
              });
          }else{
            this.drillDate.splice(this.drillDate.indexOf(this.downIds[0]), 1);
          }
        }
        this.$refs.multipleTable1.clearSelection();
      },
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0 || columnIndex === 1 ) {
          if (rowIndex % 3 === 0) {
            return {
              rowspan: 3,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
       /* var num = 0
        if (columnIndex == 0 || columnIndex == 1  ) {
          for(var i=0;i<this.data.length;i++){

            if(row.drillPlanId == this.data[i].drillPlanId){
              num++;
            }
          }
          if(num==1){
            return {
              rowspan: num,
              colspan: 1
            };
          }else if(num>1){
            if(this.data[rowIndex-1] && this.data[rowIndex].drillPlanId == this.data[rowIndex-1].drillPlanId){
              return {
                rowspan: 0,
                colspan: 0
              }
            }else{
              return {
                rowspan: num,
                colspan: 1
              }
            }
          }
        }*/
      },
      beforeAvatarUpload (file) {
        var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
        const isLt4M = file.size / 1024 / 1024 <= 4; //图片大小不超过2MB
        if (!testmsg) {
          this.$message.error("上传图片格式不对!");
          return false;
        }
        if (!isLt4M) {
          this.$message.error("上传图片大小不能超过 4M!");
          return false;
        }
        return testmsg && isLt4M;
      },
      submitForm (formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {

           /* if (this.loading1 || this.loading2 || this.loading3) {
              this.$message({
                message: "文件还没有完全上传",
                type: "error"
              });
              return false;
            }*/

            this.ruleForm['userName']=JSON.parse(localStorage.getItem('user')).userAccount;
            this.ruleForm['companyId']= JSON.parse(localStorage.getItem("user")).companyId;
            this.ruleForm['businessId']= localStorage.businessId;
            this.ruleForm['drillStatus']= '2';
            this.ruleForm['drillTime']=  this.ruleForm.drillTime;

            this.$axios({
              method: "post",
              url: this.$baseUrl + "emergency/v1.0/plan/record/save",
              data:this.ruleForm
            }).then(res => {
              let data = res.data.meta;
              if (data.success) {
                this.$message({
                  message: "保存成功",
                  type: "success"
                });
                this.getList1()
                this.getList2()
                this.flag=false
              } else {
                this.$message({
                  message: res.data.meta.message,
                  type: "error"
                });
              }
            });
          }
        });
      },
      getName(){
        this.$axios({
          method: "get",
          url:
          this.$baseUrl +"emergency/v1.0/drill/plan/list/"+JSON.parse(localStorage.getItem("user")).companyId+"/"+localStorage.businessId
          // data:params
        }).then(res => {
          this.names=res.data.data

        });
      },
      handleSizeChange(val) {
        this.pageSize=val
        this.getList1()
      },
      onChangeStripe(e,item){
        var _that=this
        this.names.forEach(function(val, index) {
          if(val.id==e){
            if(val.planCategory=='1'){
              console.log(_that)
              _that.$message.error("综合预案不参与演练");
              item.row.planName=''
              item.row.planCategory=""
            }else if(val.planCategory=='2'){
              item.row.planName=val.planName
              item.row.planCategory=val.planCategory
              item.row.drillPeriod="2"
              item.row.planId=val.planId
              item.row.drillStatus='1'
              item.row.drillDescription=val.drillDescription
            }else{
              item.row.planCategory=val.planCategory
              item.row.drillPeriod="3"
              item.row.planId=val.planId
              item.row.planName=val.planName
              item.row.drillStatus='1'
              item.row.drillDescription=val.drillDescription
            }
          }
        })
      },
      onChangeTime(e,item){
        var _that=this
            if(item.row.planCategory=='2'){
             if(Number(e)<2){
               _that.$message({
                 message: "演练周期不能超过1年",
                 type: "error"
               });
               return
             }
              item.row.planCategory=val.planCategory
            }else if(item.row.planCategory=='3'){
              if(Number(e)<3){
                _that.$message({
                  message: "演练周期不能超过半年",
                  type: "error"
                });
                return
              }
              item.row.planCategory=val.planCategory
            }
      },

      resetForm (type) {
        if(type){
          this.ruleForm={};
          this.checkedCities=[]
        }
      },
      changeimg1 (file, fileList) {
        this.$set(this.ruleForm,'positionName',file.name)
        this.loading = true;
      },
      newload (file) {
        let url = this.$baseUrl + "emergency/v1.0/upload/file";
        var fd = new FormData();
        fd.append("file", file.file);
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        this.$axios.post(url, fd, config).then(res => {
          this.ruleForm.uploadFile = res.data.data;
          this.loading = false;
        });
      },
    },
    filters: {
      timeBy(val) {
        if (val) {
          return val.substring(0, 10)
        }
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import "../../../static/css/information.less";
  .ideaTable {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    color: #333;
    th {
      border: 1px solid #ccc;
      font-weight: 700;
    }
    .is-ok {
      width: 100px;
      font-weight: 100;
    }
    td {
      border: 1px solid #ddd;
      border-collapse: collapse;
      padding: 15px 10px;
      line-height: 24px;

      strong {
        font-weight: bold;
        display: block;
        text-align: center;
      }

      img {
        width: 120px;
        height: 60px;
      }
    }

    td:first-child {
      text-align: center;
      font-weight: bold;
    }
    .radioImg {
      text-align: center;
      font-size: 20px;
    }
  }
  .ideaTable1 {
    .td{
      text-align: left;
    }
    thead {
      line-height: 30px;

      tr:first-child {
        th {
          font-weight: 800;
        }
      }
    }
  }
  .drillGuide {
    .current-nav {
      float: none;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 30px;
      color: #939393;
      font-size: 14px;
      background: #f3f3f3;
      a {
        color: #939393;
        font-size: 14px;
      }

      i {
        margin: 0 10px;
        font-style: normal;
      }
    }
    .mianOut {
      padding: 0 30px;
      .note {
        height: 42px;
        line-height: 42px;
        p {
          color: #666;
          padding-left: 42px;
          img {
            width: 26px;
            height: 26px;
            margin-right: 5px;
          }
        }
      }
      .asTitle {
        h3 {
          font-weight: bold;
          font-size: 16px;
          color: #666;
          padding: 20px 0 0 20px;
        }
      }
      .mianInner1 {
        background: #fff;
        padding-bottom: 30px;

        .asList {
          width: 300px;
          height: 49px;
          margin: 20px auto;
          border: 1px solid #4080ff;
          border-radius: 8px;
          li {
            float: left;
            width: 50%;
            a {
              display: block;
              color: #666;
              height: 47px;
              text-align: center;
              line-height: 47px;
            }
            a.active {
              color: #fff;
              background: #4080ff;
            }
            a.active:hover {
              color: #fff;
            }
            a:hover {
              color: #4080ff;
            }
          }
          li:first-child {
            a {
              border-radius: 8px 0 0 8px;
            }
          }
          li:last-child {
            a {
              border-radius: 0 8px 8px 0;
            }
          }
        }

        .process {
          text-align: center;
          i {
            font-size: 20px;
            color: #69ed79;
            margin-right: 10px;
            position: relative;
            top: 3px;
          }
          a {
            text-decoration: underline;
            color: #666;
          }
          a:hover {
            color: #4080ff;
          }
        }

        .el-button:hover {
          opacity: 0.8;
        }
        .downBox {
          margin: 40px 0 20px;
          .table_tit {
            font-weight: bold;
            font-size: 16px;
            color: #666;
            float: left;
            margin-left: 100px;
            line-height: 36px;
          }
        }
        /*表格*/
        .el-table {
          width: calc(100% - 200px);
          margin: 0 auto;
          border-top: 1px solid #ebeef5;
          a {
            cursor: pointer;
          }
          a:hover {
            color: #4080ff;
          }
          .fileName {
            text-decoration: underline;
            color: #4080ff;
            cursor: pointer;
          }
          .fileName:hover {
            opacity: 0.8;
          }
          .el-button {
            padding: 0 18px;
            border-radius: 8px;
            border-color: #eef4fd;
            background: #eef4fd;
            height: 36px;
            color: #4080ff;
          }

          .el-button:hover {
            background: #fff;
            border-color: #4080ff;
          }
          .temName,
          .matName {
            text-decoration: underline;
            color: #333;
          }
          .deleteBtn {
            color: #4080ff;
            margin-left: 10px;
          }
          .deleteBtn:hover {
            opacity: 0.8;
          }
        }

        .el-table th > .cell {
          color: #333333;
          font-weight: bold;
        }
      }
      .mianInner2 {
        background: #fff;
        padding-bottom: 80px;
        margin-top: 30px;

        p {
          line-height: 36px;
          font-weight: bold;
          font-size: 14px;
          color: #666;
          text-align: center;
          margin-top: 60px;

          i {
            font-size: 20px;
            color: #69ed79;
            margin-right: 10px;
            position: relative;
            top: 3px;
          }

          a {
            display: inline-block;
            margin-left: 25px;
            width: 150px;
            height: 36px;
            color: #fff;
            border-radius: 8px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
            font-weight: normal;
            background: #4080ff;
            background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
          }

          a:hover {
            opacity: 0.8;
          }
        }
      }
    }

    .page-container {
      padding: 28px 0;
      width: 620px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      .el-pagination {
        float: right;
      }
      .el-button {
        float: right;
        background: #edf4fe;
        width: 50px;
        padding: 0;
        height: 28px !important;
        margin: 4px 10px auto;
        color: #7fa4fc;
        border: 0;
      }
    }
  }

  .download {
    display: block;
    float: right;
    margin-right: 100px;
    width: 105px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #4080ff;
    border-radius: 8px;
    background: #f8f7ff;
    cursor: pointer;
    i {
      font-size: 18px;
      position: relative;
      top: 2px;
    }
  }

  .download:hover {
    opacity: 0.8;
  }

  .detail-btn {
    color: #4180ff !important;
    background: #f6f9ff !important;
    border: none !important;
    border-radius: 8px !important;
    border: 1px solid #4180ff !important;
  }

  .save {
    display: block;
    float: right;
    margin-right: 15px;
    width: 79px;
    height: 36px;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
    color: #fff;
    border-radius: 8px;
    background: #4080ff;
    background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
    cursor: pointer;
  }

  .send {
    font-size: 14px;
    display: block;
    float: right;
    margin-right: 100px;
    width: 120px;
    height: 36px;
    text-align: center;
    cursor: pointer;
    line-height: 36px;
    border-radius: 8px;
    color: #fff;
  }
  .select_btn{
    .el-button{
      border-radius: 8px; border-color: #2476fe;color: #2476fe;background: #f6f9ff;
    }
    p{
      margin-left: 120px
    }
  }
  .el-upload-list {
    display: none;
  }
</style>
